<template>
    <div>
        <div>Vue中DOM操作</div>
        <div>----------------------------------------------------------</div>
        <div ref="head"></div>

        <div>练习</div>
        <div>----------------------------------------------------------</div>
        <p>原始数据{{ arr }}</p>
        <p>'排序后数据':{{ arrSort }}</p>

    </div>
</template>
<script>
export default {
    data(){
        return{
            arr:[1,4,6,7,-9,4,0,-2,-1,8],
        }
    },
    // vue dom是虚拟dom，dom操作可以再mounted函数上操作
    mounted(){ // DOM已经生成（真实dom）$.refs获取dom节点
        this.$refs.head.innerHTML= "hello"
    },
    computed:{
        arrSort(){
            var newArr = this.arr.concat();
            return newArr.sort(function(a,b){
                return a-b;
            })
        }
    }
}
</script>








